Web Share Targetãã£ã«ã¿ãŒãå®è£ ããPWAã®UXãåäžãããŸããããç¹å®ãã¡ã€ã«ã¿ã€ããåãå ¥ããã·ãŒã ã¬ã¹ã§ãã€ãã£ãã®ãããªå ±æçµ±åãäœæããæ¹æ³ã解説ããŸãã
Webå ±æã¿ãŒã²ããAPIã®ãã¹ã¿ãŒïŒã³ã³ãã³ããã£ã«ã¿ãªã³ã°ã®è©³çŽ°è§£èª¬
é²åãç¶ãããŠã§ãéçºã®äžçã§ã¯ããã€ãã£ãã¢ããªã±ãŒã·ã§ã³ãšãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®å¢çç·ã¯ãŸããŸãææ§ã«ãªã£ãŠããŸããããã°ã¬ãã·ããŠã§ãã¢ããªïŒPWAïŒã¯ãã®é©åœã®æåç·ã«ããããªãã©ã€ã³ã¢ã¯ã»ã¹ãããã·ã¥éç¥ãããŒã ç»é¢ãžã®ã€ã³ã¹ããŒã«ãšãã£ããã€ãã£ãåæ§ã®æ©èœãæäŸããŸãããã®ã®ã£ãããåããæã匷åãªæ©èœã®äžã€ãWebå ±æã¿ãŒã²ããAPIã§ãããããã«ããPWAã¯åºç€ãšãªããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã«èªèº«ãå ±æã¿ãŒã²ãããšããŠç»é²ã§ããŸããããã¯ããŠãŒã¶ãŒããã€ãã£ãã¢ããªãšåãããã«ãä»ã®ã¢ããªããããªãã®PWAã«çŽæ¥ã³ã³ãã³ããå ±æã§ããããšãæå³ããŸãã
ããããå ±æãããã³ã³ãã³ããåã«åãåãã ãã§ã¯äžååã§ãããŠãŒã¶ãŒãç»åç·šéPWAã«åç»ãã¡ã€ã«ãå ±æããããšãããã©ããªãã§ããããïŒãããã¯ãã¡ã¢åž³ã¢ããªã±ãŒã·ã§ã³ã«ZIPã¢ãŒã«ã€ããå ±æããããšãããïŒé©åãªå¶åŸ¡ããªããã°ãããã¯ãšã©ãŒã¡ãã»ãŒãžãšæ··ä¹±ã«æºã¡ãããã©ã¹ãã¬ãŒã·ã§ã³ã®ããŸããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸããããã§ãéèŠã§ãããªããèŠéããããã¡ãªæ©èœãã³ã³ãã³ããã£ã«ã¿ãªã³ã°ãç»å ŽããŸãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãWebå ±æã¿ãŒã²ããAPIã®ãã£ã«ã¿ãªã³ã°ã¡ã«ããºã ã«ã€ããŠè©³ãã解説ããŸãããããã§ãã·ã§ãã«ãªPWAã«ãšã£ãŠãªããããäžå¯æ¬ ãªã®ãããŠã§ããããã§ã¹ãã§å®£èšçã«å®è£ ããæ¹æ³ããããŠãµãŒãã¹ã¯ãŒã«ãŒã§ãã£ã«ã¿ãªã³ã°ãããã³ã³ãã³ããé©åã«åŠçããæ¹æ³ãæ¢ããŸãããã®èšäºãèªã¿çµããé ã«ã¯ãå ±æã³ã³ãã³ããåãå ¥ããã ãã§ãªãããããã€ã³ããªãžã§ã³ãã«è¡ããã°ããŒãã«ãªãŠãŒã¶ãŒããŒã¹ã«å¯ŸããŠã·ãŒã ã¬ã¹ã§çŽæçãªãšã¯ã¹ããªãšã³ã¹ãåµåºããPWAãæ§ç¯ããã¹ãã«ã身ã«ã€ããŠããã§ãããã
åºç€ïŒWebå ±æã¿ãŒã²ããAPIã®ç°¡åãªåŸ©ç¿
ãã£ã«ã¿ãªã³ã°ã«ã€ããŠæãäžããåã«ãWebå
±æã¿ãŒã²ããAPIã®æ žãšãªãã³ã³ã»ãããç°¡åã«æ¯ãè¿ããŸãããããã®äž»ãªæ©èœã¯ãPWAãä»ã®ã¢ããªã±ãŒã·ã§ã³ããå
±æãããããŒã¿ãåãåããããã«ããããšã§ããããã¯ãPWAã®manifest.jsonãã¡ã€ã«å
ã§ãshare_targetã¡ã³ããŒã䜿çšããŠå®å
šã«èšå®ãããŸãã
åºæ¬çãªshare_targetã®èšå®ã¯æ¬¡ã®ããã«ãªããŸãïŒ
{
"name": "My Awesome PWA",
"short_name": "AwesomePWA",
"start_url": "/",
"display": "standalone",
"share_target": {
"action": "/share-receiver/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
}
äž»èŠãªããããã£ã®å èš³ãèŠãŠã¿ãŸãããïŒ
action: å ±æããŒã¿ãåãåãPWAå ã®URLããã®ããŒãžãåä¿¡ã³ã³ãã³ãã®åŠçãæ åœããŸããmethod: 䜿çšãããHTTPã¡ãœãããåçŽãªããã¹ããURLã®å ±æã§ã¯GETãäžè¬çã§ãããŒã¿ã¯URLãã©ã¡ãŒã¿ãšããŠæž¡ãããŸãããã¡ã€ã«ã®å ±æã«ã¯POSTãå¿ èŠã§ããenctype: ïŒãã¡ã€ã«ãå«ãPOSTã¡ãœããã§å¿ é ïŒãšã³ã³ãŒãã£ã³ã°ã¿ã€ããæå®ããŸãããã¡ã€ã«ã®å Žåãããã¯multipart/form-dataã§ãªããã°ãªããŸãããparams: å ±æããŒã¿ã®äžéšïŒtitleãtextãurlãªã©ïŒããã¢ã¯ã·ã§ã³URLãæåŸ ããã¯ãšãªãã©ã¡ãŒã¿åã«ãããã³ã°ãããªããžã§ã¯ãã§ãã
ãŠãŒã¶ãŒããã®PWAã«ãªã³ã¯ãå
±æãããšããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã¯/share-receiver/?title=Shared%20Title&text=Shared%20Description&url=https%3A%2F%2Fexample.comã®ãããªURLãæ§ç¯ãããŠãŒã¶ãŒãããã«ããã²ãŒãããŸããããã¯åŒ·åã§ããããã¡ã€ã«å
±æã«ã¯å¯Ÿå¿ããŠããããããã«çã®è€éããšãã£ã«ã¿ãªã³ã°ã®å¿
èŠæ§ãçããŸãã
åé¡ç¹ïŒãã£ã«ã¿ãªã³ã°ãããŠããªãå ±æããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæãªãçç±
ããªããåçç·šéçšã®çŽ æŽãããPWAãæ§ç¯ãããšæ³åããŠã¿ãŠãã ããããã¡ã€ã«ãåãå
¥ããããã«Webå
±æã¿ãŒã²ããAPIãå®è£
ããŸããããããã§ã¹ãã«ã¯ãPOSTãšmultipart/form-dataçšã«èšå®ãããshare_targetãå«ãŸããŠããŸãã
ãŠãŒã¶ãŒãããªãã®PWAãã€ã³ã¹ããŒã«ããŸããåŸã§ããã¡ã€ã«ãããŒãžã£ãŒãé²èЧäžã«PDFããã¥ã¡ã³ããå ±æããããšã«ããŸãããOSã®å ±æã·ãŒããéããšãããªãã®åçç·šéPWAãæå¹ãªã¿ãŒã²ãããšããŠè¡šç€ºãããŸãããŠãŒã¶ãŒã¯ãããããééã£ãŠããããéžæããŸããPDFã¯ããªãã®PWAã«éä¿¡ãããŸãããPWAã¯ç»åããåŠçã§ããŸãããæ¬¡ã«äœãèµ·ããã§ããããïŒ
- ã¯ã©ã€ã¢ã³ããµã€ãã§ã®å€±æïŒ ã¢ããªã±ãŒã·ã§ã³ã®JavaScriptãPDFãç»åãšããŠåŠçããããšããäžå¯è§£ãªãšã©ãŒãå£ããã€ã³ã¿ãŒãã§ãŒã¹ã衚瀺ãããŸãã
- ãµãŒããŒãµã€ãã§ã®æåŠïŒ ãã¡ã€ã«ããµãŒããŒã«ã¢ããããŒãããå Žåãããã¯ãšã³ãã®ããžãã¯ããµããŒããããŠããªããã¡ã€ã«ã¿ã€ããæåŠããã¯ã©ã€ã¢ã³ãã«ãšã©ãŒã¡ãã»ãŒãžãéãè¿ãå¿ èŠããããŸãã
- ãŠãŒã¶ãŒã®æ··ä¹±ïŒ ãŠãŒã¶ãŒã¯ãªãæ©èœããªãã£ãã®ãçåã«æããŸãããã¡ã€ã«ãå ±æãããªãã·ã§ã³ãäžããããã®ã§ããµããŒããããŠãããšåœç¶èããŸããã
ããã¯å žåçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®æçµ¶ã§ããPWAã¯æ©èœïŒãã¡ã€ã«ã®åä¿¡ïŒã宣äŒããŠããŸãããã©ã®çš®é¡ã®ãã¡ã€ã«ãæ±ããããæå®ããŠããŸãããããã«ããããŠãŒã¶ãŒã®å ±æã·ãŒããè¡ãæ¢ãŸãã«ã€ãªãããªãã·ã§ã³ã§ãã¡ããã¡ãã«ãªããä¿¡é ŒãæãªããPWAããã€ãã£ãã®åçç©ãããæŽç·ŽãããŠãããä¿¡é Œæ§ãäœããšæããããŠããŸããŸãã
解決çïŒãŠã§ããããã§ã¹ãã§ã®`files`ãã£ã«ã¿ãŒã®å°å ¥
解決çã¯ãPWAããµããŒããããã¡ã€ã«ã¿ã€ãããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã«å®£èšçã«äŒããããšã§ããããã¯ãshare_targetèšå®ã®paramsãªããžã§ã¯ãã«filesé
åã远å ããããšã§è¡ãããŸããOSã¯ãã®æ
å ±ã䜿çšããŠå
±æã·ãŒãããã£ã«ã¿ãªã³ã°ãããŠãŒã¶ãŒãäºææ§ã®ãããã¡ã€ã«ãå
±æããŠããå Žåã«ã®ã¿ãããªãã®PWAãã¿ãŒã²ãããšããŠè¡šç€ºããŸãã
filesã¡ã³ããŒã®æ§é ã¯ãªããžã§ã¯ãã®é
åã§ãåãªããžã§ã¯ãã¯2ã€ã®ããããã£ãæã¡ãŸãïŒ
name:multipart/form-dataãªã¯ãšã¹ãå ã®ãã©ãŒã ãã£ãŒã«ãã®ååã衚ãæååãããã¯ããµãŒãã¹ã¯ãŒã«ãŒããµãŒããŒãµã€ãã®ã³ãŒãã§ãã¡ã€ã«ãèå¥ããæ¹æ³ã§ããaccept: æååã®é åã§ãåæååã¯ã¢ããªã±ãŒã·ã§ã³ãåãå ¥ããMIMEã¿ã€ããŸãã¯ãã¡ã€ã«æ¡åŒµåã§ãã
ãããå®çŸ©ããããšã§ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ãšã®å¥çŽãäœæããPWAãå ±æãããã³ã³ãã³ããæ¬åœã«åŠçã§ããå Žåã«ã®ã¿åŒã³åºãããããã«ããŸãã
å®è·µçãªå®è£ ïŒç¹å®ã®ã³ã³ãã³ãã¿ã€ãã«å¯Ÿãããã£ã«ã¿ãªã³ã°
filesãã£ã«ã¿ãŒã广çã«èšå®ããæ¹æ³ããããã€ãã®å®äžçã®ã·ããªãªã§æ¢ã£ãŠã¿ãŸãããããããã®äŸã§ã¯ãshare_targetããã§ã«"method": "POST"ãš"enctype": "multipart/form-data"ã§èšå®ãããŠãããšä»®å®ããŸãã
ã·ããªãª1ïŒJPEGç»ååãæãçšPWA
ããªãã®ã¢ããªã±ãŒã·ã§ã³ã¯éåžžã«ç¹åããŠããŸãïŒJPEGãã¡ã€ã«ã«å¯Ÿããåãæãæäœã®ã¿ãè¡ããŸããPNGãGIFããã®ä»ã®åœ¢åŒã¯æ±ããããããŸãããèšå®ã¯éåžžã«å ·äœçã«ãªããŸãã
"share_target": {
"action": "/crop-image/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "image_title",
"files": [
{
"name": "jpeg_file",
"accept": ["image/jpeg"]
}
]
}
}
çµæïŒ ãŠãŒã¶ãŒããã¡ã€ã«ãå ±æããããšãããšãããªãã®PWAã¯ãã¡ã€ã«ãJPEGã§ããå Žåã«ã®ã¿å ±æã·ãŒãã«è¡šç€ºãããŸããPNGãåç»ãéžæããå Žåãããªãã®ã¢ããªã¯ãªãã·ã§ã³ãšããŠãªã¹ããããŸãããããã¯ãæ£ç¢ºã§é²åŸ¡çãªãã£ã«ã¿ãªã³ã°ã®å®ç§ãªäŸã§ãã
ã·ããªãª2ïŒå€æ©èœãªã¡ãã£ã¢ã®ã£ã©ãªãŒã¢ããª
次ã«ãããæè»ãªPWAãäŸãã°äžè¬çãªç»å圢åŒãã¹ãŠãšçãåç»ãããä¿åã»è¡šç€ºã§ããã¡ãã£ã¢ã®ã£ã©ãªãŒãèããŠã¿ãŸããããããã§ã¯ãããåºç¯ãªaccepté
åãå¿
èŠã«ãªããŸãã
"share_target": {
"action": "/add-to-gallery/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "media_files",
"accept": [
"image/jpeg",
"image/png",
"image/gif",
"image/webp",
"image/svg+xml",
"video/mp4",
"video/webm"
]
}
]
}
}
䟿å®äžã¯ã€ã«ãã«ãŒãã䜿çšããããšãã§ããŸãããæç¢ºãã®ããã«ã¯å ·äœçã§ããããšããã°ãã°åªããŠããŸãïŒ
"accept": ["image/*", "video/*"]
çµæïŒ ãã®èšå®ã«ãããããªãã®PWAã¯åºç¯å²ã®ã¡ãã£ã¢ãã¡ã€ã«ã®ã¿ãŒã²ããã«ãªããŸããã®ã£ã©ãªãŒã¢ããªããåçãå ±æãããããœãŒã·ã£ã«ã¡ãã£ã¢ã¢ããªããåç»ãå ±æããããããšãããªãã®PWAãé©åãªå®å ãšããŠæ£ãã衚瀺ãããããã«ãªããŸãã
ã·ããªãª3ïŒææžç®¡çPWA
ããžãã¹ãŠãŒã¶ãŒãææžã管çããããã®PWAãæ§ç¯ããŠãããšããŸããããPDFãMicrosoft WordææžãExcelã¹ãã¬ããã·ãŒããåãå ¥ããå¿ èŠããããŸãã
ãã®ããã«ã¯ãæ£ããMIMEã¿ã€ããå¿ èŠã§ãïŒ
- PDF:
application/pdf - Word (new):
application/vnd.openxmlformats-officedocument.wordprocessingml.document - Excel (new):
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
ãããã§ã¹ãã®èšå®ã¯æ¬¡ã®ããã«ãªããŸãïŒ
"share_target": {
"action": "/upload-document/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "documents",
"accept": [
"application/pdf",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
".pdf", ".docx", ".xlsx"
]
}
]
}
}
泚æïŒ accepté
åã«ãã¡ã€ã«æ¡åŒµåïŒ.pdfãªã©ïŒãå«ããããšã¯è¯ãç¿æ
£ã§ããMIMEã¿ã€ããæšæºã§ãããäžéšã®ãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ããã¡ã€ã«ãããŒãžã£ãŒã¯æ¡åŒµåã«äŸåããå Žåããããããäž¡æ¹ãæäŸããããšã§ç°ãªããã©ãããã©ãŒã éã§ã®äºææ§ãåäžããŸãã
é«åºŠãªãŠãŒã¹ã±ãŒã¹ïŒè€æ°ã®ç°ãªããã¡ã€ã«ã»ããïŒä»æ§ã®ç¢ºèªïŒ
filesããããã£ã¯é
åã§ããããã¯åŒ·åãªå°æ¥ã®å¯èœæ§ã瀺åããŠããŸãïŒã¢ããªãäžåºŠã®å
±æã¢ã¯ã·ã§ã³ã§è€æ°ã®ç°ãªãã¿ã€ãã®ãã¡ã€ã«ãå¿
èŠãšããå Žåã¯ã©ãã§ããããïŒäŸãã°ããããªãã¡ã€ã«ãšïŒãã¬ãŒã·ã§ã³çšã®ïŒãªãŒãã£ãªãã¡ã€ã«ãå¿
èŠãšããåç»ç·šéPWAãªã©ã§ãã
çè«çã«ã¯ããããã§ã¹ãã§æ¬¡ã®ããã«å®çŸ©ã§ããŸãïŒ
"files": [
{
"name": "video_track",
"accept": ["video/mp4"]
},
{
"name": "audio_track",
"accept": ["audio/mpeg", "audio/wav"]
}
]
éèŠãªæ³šæç¹ïŒ 仿§ã§ã¯ãã®æ§é ãèš±å¯ãããŠããŸããã仿¥ã®ãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã§ã®å®çšçãªãµããŒãã¯éãããŠããŸããã»ãšãã©ã®OSã®å
±æUIã¯ãåäžã®ãã¡ã€ã«ã»ãããå
±æããããšãåæã«èšèšãããŠããŸããéåžžãåäžã®å
±æã¢ã¯ã·ã§ã³ã«å¯ŸããŠãŠãŒã¶ãŒã«ãããªãã¡ã€ã«ãšãªãŒãã£ãªãã¡ã€ã«ãéžæããããä¿ãã€ã³ã¿ãŒãã§ãŒã¹ã¯æäŸãããŠããŸããããããã£ãŠãä»ã®ãšããã¯ã1ã€ã®å
¥åã§åãå
¥ãå¯èœãªãã¹ãŠã®ã¿ã€ããã«ããŒããåäžã®ãšã³ããªãfilesé
åã«èšè¿°ããã®ãæåã§ãããããããã®æ§é ãååšããããšãç¥ã£ãŠããããšã¯ãã¢ããªã±ãŒã·ã§ã³ã®å°æ¥æ§ã確ä¿ããäžã§äŸ¡å€ããããŸãã
å®çŸããïŒãµãŒãã¹ã¯ãŒã«ãŒã§å ±æãã¡ã€ã«ãåŠçãã
ãããã§ã¹ãã§ãã£ã«ã¿ãŒãå®çŸ©ããããšã¯æåã®ã¹ãããã§ããæ¬¡ã«åããããéèŠãªã¹ãããã¯ãåä¿¡ããPOSTãªã¯ãšã¹ããåŠçããããšã§ãããããè¡ãæãå
ç¢ãªå Žæã¯ãµãŒãã¹ã¯ãŒã«ãŒã§ããPWAã®ã¿ããéããŠããªããŠããªã¯ãšã¹ããã€ã³ã¿ãŒã»ããã§ããçã«ã·ãŒã ã¬ã¹ãªäœéšãæäŸããŸãã
ãµãŒãã¹ã¯ãŒã«ãŒãã¡ã€ã«ïŒäŸïŒsw.jsïŒã«fetchã€ãã³ããªã¹ããŒã远å ããå¿
èŠããããŸãã
以äžã¯ãå ±æãã€ã³ã¿ãŒã»ãããããã©ãŒã ããŒã¿ãåŠçãããã¡ã€ã«ãæ±ãæ¹æ³ã®å®å šãªäŸã§ãïŒ
// In your service-worker.js
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
// Check if this is a share request to our action URL
if (event.request.method === 'POST' && url.pathname === '/add-to-gallery/') {
event.respondWith((async () => {
try {
// 1. Parse the multipart/form-data
const formData = await event.request.formData();
// 2. Retrieve the files using the 'name' from the manifest
// Use getAll() to handle multiple files shared at once
const mediaFiles = formData.getAll('media_files');
// 3. Process the files (e.g., store them in IndexedDB)
for (const file of mediaFiles) {
console.log('Received file:', file.name, 'Type:', file.type, 'Size:', file.size);
// In a real app, you would store this file.
// Example: await saveFileToIndexedDB(file);
}
// 4. Redirect the user to a success page
// This provides immediate feedback that the share was successful.
return Response.redirect('/share-success/', 303);
} catch (error) {
console.error('Error handling shared file:', error);
// Optionally, redirect to an error page
return Response.redirect('/share-error/', 303);
}
})());
}
});
// You would also need a function to save files, for example:
async function saveFileToIndexedDB(file) {
// Logic to open IndexedDB and store the file object
// This part is highly application-specific.
}
ã³ãŒãã®äž»èŠãªã¹ãããïŒ
- ãªã¯ãšã¹ãã®ã€ã³ã¿ãŒã»ããïŒ ã³ãŒãã¯ãŸãããã§ããã€ãã³ãããããã§ã¹ãã§æå®ããã
actionURLïŒ/add-to-gallery/ïŒãžã®POSTãªã¯ãšã¹ãã§ãããã©ããããã§ãã¯ããŸãã - ãã©ãŒã ããŒã¿ã®è§£æïŒ éåæã®
event.request.formData()ã¡ãœããã䜿çšããŠãåä¿¡ããmultipart/form-dataãè§£æããŸãã - ãã¡ã€ã«ã®ååŸïŒ
formData.getAll('media_files')ãåŒã³åºããŸããæåå'media_files'ã¯ããããã§ã¹ãã®filesé åã§å®çŸ©ããnameãšå®å šã«äžèŽããå¿ èŠããããŸãããŠãŒã¶ãŒã¯äžåºŠã«è€æ°ã®ãã¡ã€ã«ãå ±æã§ãããããgetAll()ã䜿çšããããšãéèŠã§ãã - åŠçãšãªãã€ã¬ã¯ãïŒ ãã¡ã€ã«ãåŠçããåŸïŒäŸïŒIndexedDBãCache APIã«ä¿åïŒããªãã€ã¬ã¯ããå®è¡ããã®ããã¹ããã©ã¯ãã£ã¹ã§ããããã«ããããŠãŒã¶ãŒã¯ã¢ããªå
ã®ããŒãžã«ç§»åããå
±æãæåããããšã確èªããPWAã®ã€ã³ã¿ãŒãã§ãŒã¹ãžã®ã¹ã ãŒãºãªç§»è¡ãæäŸããŸããPOSTãªã¯ãšã¹ãã®åŸã«ã¯
303 See Otherãªãã€ã¬ã¯ããé©åã§ãã
å ·äœçãªã¡ãªããïŒãã£ã«ã¿ãªã³ã°ãPWAãã©ã®ããã«åäžãããã
å ±æã¿ãŒã²ãããã£ã«ã¿ãªã³ã°ã®å®è£ ã¯ãåãªãæè¡çãªäœæ¥ã§ã¯ãããŸãããã¢ããªã±ãŒã·ã§ã³ã®å質ãšãŠãŒã¶ãŒã®èªèã«çŽæ¥çãã€è¯å®çãªåœ±é¿ãäžããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ïŒUXïŒã®åäžïŒ ãããäž»ãªå©ç¹ã§ããPWAã¯é¢é£æ§ãããå Žåã«ã®ã¿å ±æãªãã·ã§ã³ãšããŠè¡šç€ºãããŸããããã«ãããå ±æã·ãŒããæŽçããããšã©ãŒã«ã€ãªãããŠãŒã¶ãŒã¢ã¯ã·ã§ã³ãé²ããŸããçŽæçã§ã¹ããŒãããããŠãŠãŒã¶ãŒã®æéãå°éããŠãããšæããããŸãã
- ã¢ããªã±ãŒã·ã§ã³ãšã©ãŒã®åæžïŒ ãµããŒããããŠããªããã¡ã€ã«ãã¢ããªã±ãŒã·ã§ã³ããžãã¯ã«å°éããã®ãé²ãããšã§ãæœåšçãªãšã©ãŒã®ã¯ã©ã¹å šäœãæé€ããŸããã³ãŒãã¯äºæããªããã¡ã€ã«ã¿ã€ããåŠçããããã®è€éãªåå²ãå¿ èŠãšããŸããã
- ä¿¡é Œæ§ã®åäžïŒ ã¢ããªã±ãŒã·ã§ã³ãäºæž¬éãã«åäœããå ±æã®ãããªã³ã¢ã¿ã¹ã¯ã§å€±æããªãå ŽåããŠãŒã¶ãŒã¯ä¿¡é Œãç¯ããŸããããã«ãããPWAã¯ã¢ããªã¹ãã¢ã®ãã€ãã£ãã¢ããªã±ãŒã·ã§ã³ãšåããããå®å®ããŠæŽç·ŽãããŠãããšæããããŸãã
- ã³ãŒãããžãã¯ã®ç°¡çŽ åïŒ ãµãŒãã¹ã¯ãŒã«ãŒãšã¯ã©ã€ã¢ã³ããµã€ãã®ã³ãŒããããã·ã³ãã«ã«ãªããŸãããããã§ã¹ãã®ã«ãŒã«ã«åºã¥ããŠãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã«ãã£ãŠäºåã«å¯©æ»ããããã¡ã€ã«ã®ã¿ãå°éãããšããèªä¿¡ãæã£ãŠããã¡ã€ã«åŠçããžãã¯ãèšè¿°ã§ããŸãã
ãã©ãããã©ãŒã ãæšªæããå®è£ ã®ãã¹ããšãããã°
ãã®æ©èœãé©åã«ãã¹ãããããšã¯éåžžã«éèŠã§ããå®è£ ãå ç¢ã§ããããšã確èªããããã®ãã§ãã¯ãªã¹ãã以äžã«ç€ºããŸãïŒ
- ãã©ãŠã¶ã®DevToolsã䜿çšããïŒ ChromeãŸãã¯Edgeã®DevToolsãéããApplicationã¿ãã«ç§»åãããµã€ãããã«ããManifestãéžæããŸãã`share_target`ã»ã¯ã·ã§ã³ãŸã§ã¹ã¯ããŒã«ããŸãããã©ãŠã¶ã¯ãããã§ã¹ããè§£æãã`action`ã`params`ã`files`ãã£ã«ã¿ãŒãèªèããŠãããã©ããã衚瀺ããŸããJSONã®æ§æãšã©ãŒã¯ããã§ãã©ã°ãç«ãŠãããŸãã
- å®éã®ã¢ãã€ã«ããã€ã¹ïŒAndroidïŒã§ãã¹ãããïŒ ãããæãéèŠãªãã¹ãã§ããAndroidããã€ã¹ã«PWAãã€ã³ã¹ããŒã«ããŸãããã¡ã€ã«ãããŒãžã£ãŒããã©ãã®ã£ã©ãªãŒããŸãã¯ãã¡ã€ã«ãå
±æã§ããä»»æã®ã¢ããªãéããŸãã
- ãµããŒããããŠãããã¡ã€ã«ã¿ã€ããå ±æããŠã¿ãŠãã ãããPWAãå ±æã·ãŒãã«è¡šç€ºãããã¯ãã§ãããããéžæãããã¡ã€ã«ãæ£ããåä¿¡ãããããšã確èªããŸãã
- ãµããŒããããŠããªããã¡ã€ã«ã¿ã€ããå ±æããŠã¿ãŠãã ãããPWAã¯å ±æã·ãŒãã«è¡šç€ºãããã¹ãã§ã¯ãããŸããã
- äžåºŠã«è€æ°ã®ãµããŒããããŠãããã¡ã€ã«ãå ±æããŠã¿ãŠãã ãããPWAã衚瀺ããããµãŒãã¹ã¯ãŒã«ãŒããã¹ãŠã®ãã¡ã€ã«ãæ£ããåä¿¡ããããšã確èªããŸãã
- ãã¹ã¯ãããïŒWindows, macOS, ChromeOSïŒã§ãã¹ãããïŒ ææ°ã®ãã¹ã¯ããããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã«ãå ±ææ©èœããããŸããäŸãã°Windowsã§ã¯ããšã¯ã¹ãããŒã©ãŒã§ãã¡ã€ã«ãå³ã¯ãªãã¯ãããå ±æãã³ã³ããã¹ãã¡ãã¥ãŒã䜿çšã§ããŸããPWAãChromeãŸãã¯Edgeçµç±ã§ã€ã³ã¹ããŒã«ãããŠããå Žåããã£ã«ã¿ãŒã®ã«ãŒã«ã«åŸã£ãŠã·ã¹ãã ã®å ±æUIã«è¡šç€ºãããã¯ãã§ãã
- ããããèœãšã穎ãé¿ããïŒ
- MIMEã¿ã€ãã®ã¿ã€ãïŒ MIMEã¿ã€ããå確èªããŠãã ããã
image/jpegã®ä»£ããã«image/jpgã®ãããªåçŽãªã¿ã€ããã¹ã§ãã£ã«ã¿ãŒã倱æããããšããããŸãã - ãµãŒãã¹ã¯ãŒã«ãŒã®ã¹ã³ãŒãïŒ ãµãŒãã¹ã¯ãŒã«ãŒãç»é²ããããã®ã¹ã³ãŒãã
actionURLãã«ããŒããŠããããšã確èªããŠãã ããã - ãããã§ã¹ãã®ãã£ãã·ã³ã°ïŒ ãã©ãŠã¶ã¯
manifest.jsonãã¡ã€ã«ããã£ãã·ã¥ããŸãã倿ŽåŸããµã€ãã®ããŒã¿ãã¯ãªã¢ããããDevToolsã®Service Workersã¿ãã§ãUpdate on reloadããªãã·ã§ã³ã䜿çšããŠåŒ·å¶çã«ãªãã¬ãã·ã¥ããå¿ èŠãããå ŽåããããŸãã
- MIMEã¿ã€ãã®ã¿ã€ãïŒ MIMEã¿ã€ããå確èªããŠãã ããã
ã°ããŒãã«ãªç¶æ³ïŒãã©ãŠã¶ãšãã©ãããã©ãŒã ã®äºææ§
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«éçºããå ŽåããµããŒãç¶æ³ãçè§£ããããšãéèŠã§ããWebå ±æã¿ãŒã²ããAPIãç¹ã«ãã®ãã¡ã€ã«ãã£ã«ã¿ãªã³ã°æ©èœã¯ããŸã ãã¹ãŠã®ãã©ãŠã¶ãšãã©ãããã©ãŒã ã§æ®éçã«ãµããŒããããŠããããã§ã¯ãããŸããã
- ChromiumããŒã¹ã®ãã©ãŠã¶ïŒGoogle Chrome, Microsoft EdgeïŒïŒ ãµããŒãã¯åªããŠããŸãããã®æ©èœã¯AndroidãWindowsãChromeOSã§ç¢ºå®ã«åäœããã¢ãã€ã«ãšãã¹ã¯ãããã®äž¡æ¹ã§äžçäžã®ãŠãŒã¶ãŒããŒã¹ã®å€§éšåãã«ããŒããŠããŸãã
- SafariïŒiOS, iPadOS, macOSïŒïŒ Appleã¯Safariã§Webå ±æã¿ãŒã²ããã®ãµããŒããå®è£ ããŠããŸãããã ãããã©ãããã©ãŒã åºæã®åäœãå¶éãããå ŽåããããŸããå®è£ ãæåŸ éãã®äœéšãæäŸããããšã確èªããããã«ãAppleããã€ã¹ã§åŸ¹åºçã«ãã¹ãããããšãäžå¯æ¬ ã§ããæè¿ã®ã¢ããããŒãã«ããããã¡ã€ã«å ±æã®ãµããŒãã¯å€§å¹ ã«æ¹åãããŸããã
- FirefoxïŒ Firefoxã§ã®ãµããŒãã¯ããéå®çã§ããé¢é£ããPWAæ©èœã®å®è£ ã«é²å±ã¯ãããŸããããã¡ã€ã«ã«å¯ŸããWebå ±æã¿ãŒã²ããAPIã®å®å šãªãµããŒãã¯ChromiumãSafariã«é ãããšã£ãŠããŸãã
ããªãã®æŠç¥ïŒ çŸåšã®ç¶æ³ãèãããšãChromiumãã©ãŠã¶ãšSafariã®åºç¯ãªãŠãŒã¶ãŒããŒã¹åãã«ãã®æ©èœãèªä¿¡ãæã£ãŠå®è£ ãã€ã€ããããããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãã§ããããšãçè§£ã§ããŸããä»ã®ãã©ãŠã¶ã®ãŠãŒã¶ãŒã¯åã«PWAãå ±æã¿ãŒã²ãããšããŠè¡šç€ºããªãã ãã§ãããããã¯ã°ã¬ãŒã¹ãã«ãã°ã©ããŒã·ã§ã³ã§ããåžžã«ãŠãŒã¶ãŒã«caniuse.comã®ãããªãªãœãŒã¹ã§ææ°ã®ãªã¢ã«ã¿ã€ã ãµããŒãããŒã¿ã確èªããããæ¡å ããŠãã ããã
çµè«ïŒæªæ¥ã¯çµ±åãããŠãã
Webå ±æã¿ãŒã²ããAPIã®`files`ãã£ã«ã¿ãŒã¯ãåãªããã€ããŒãªèšå®ã®è©³çް以äžã®ãã®ã§ããããŠã§ããã¢ããªã±ãŒã·ã§ã³ãã©ãããã©ãŒã ãšããŠæçããããšã®èšŒã§ããããã¯ãå€ç«ãããŠã§ããµã€ããæ§ç¯ããããšããããŠãŒã¶ãŒã®ã¯ãŒã¯ãããŒãšãã®ãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã®æ £ç¿ãå°éãããæ·±ãçµ±åããããŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæããããšãžã®ã·ããã衚ããŠããŸãã
ã³ã³ãã³ããã£ã«ã¿ãªã³ã°ãå®è£ ããããšã§ãPWAã®å ±ææ©èœãæ±çšçãªåä¿¡æ©ãããã€ã³ããªãžã§ã³ãã§ã³ã³ããã¹ããèªèãããšã³ããã€ã³ããžãšå€é©ããŸãããŠãŒã¶ãŒã®æ©æŠããªããããšã©ãŒãé²ãããã€ãŠã¯ãã€ãã£ãã¢ããªã±ãŒã·ã§ã³ã ãã®ãã®ã§ãã£ãã¬ãã«ã®ä¿¡é ŒãšæŽç·Žãç¯ãäžããŸããããã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšã¢ããªã±ãŒã·ã§ã³ã®å ç¢æ§ã«ãããŠå€§ããªå©çãããããããŠã§ããããã§ã¹ããžã®å°ããªè¿œå ã§ãã
次ã®PWAãæ§ç¯ããéã«ã¯ãåãªãå ±æã¿ãŒã²ããã«ããã ãã§ãªããã¹ããŒããªå ±æã¿ãŒã²ããã«ããŠãã ãããäžçäžã®ãŠãŒã¶ãŒãããã«æè¬ããã§ãããã